<template>
	<view>
		<view>
			<navbar title='Baage校园圈' :is-child="true" />
		</view>
		<view>
			<u-form>
				<view>
					<u-collapse :border="false">
						<u-collapse-item title="点我填写联系方式，方便其他同学联系!" size="11" icon="qq-fill" >
							<view>
								<u-form-item  label="联系类型" labelWidth="80" :borderBottom="true">
									<checkBox checkType="single" :checkOptions="checkOptions" :activeColor="'#439eff'" @checkChange="checkChange" ref="child"></checkBox>
								</u-form-item>
								<u-form-item  label="联系信息" labelWidth="80" :borderBottom="true">
									<u--input v-model="posting.contact" border="none"></u--input>
								</u-form-item>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view>
					<u--textarea v-model="posting.detail" :maxlength="800"
						placeholder="在发布任何内容之前，请确保符合学校规定，避免恶意攻击他人，同时禁止发布垃圾广告等信息。让我们一起共同维护一个积极健康的校园社区环境！"
						border="bottom" count autoHeight
					>
					</u--textarea>
				</view>
				<view>
					<picker @change="bindPickerChange" :value="categoryIndex" :range="category" range-key="name">
						<view style="padding: 20rpx;background-color: white; display: flex; justify-content: space-between;">
							<text style="color: #434343; font-size: 0.9rem;">主题分类：</text>
							<view style="display: flex;">
								<text style="color: #b3b3b3; font-size: 0.9rem;">{{ category[categoryIndex].name }}</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</picker>
				</view>
				<view style="margin: 20rpx 15rpx; 0rpx;">
					<u-upload
						:fileList="posting.fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
						:maxCount="10"
						:previewFullImage="true"
						:width="110"
						:height="110"
					></u-upload>
				</view>
				<view>
					<view style="margin: 0 30rpx;">
						<wButton
							class="wbutton"
							text="发 布"
							:rotate="isRotate" 
							@click="submit"
						></wButton>
					</view>
					<view style="margin-top: 20rpx; display: flex; justify-content: center;">
						<u-form-item>
							<checkbox-group @change="changeAnonymous">
								<text>不愿透漏姓名 </text><checkbox :checked="posting.anonymous" style="transform:scale(0.6)" />
							</checkbox-group>
						</u-form-item>
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	
	import checkBox from '@/components/checkBox/checkBox.vue'
	import wButton from '@/components/watch-login/watch-button.vue' //button
	
	import { uploadFilePromise } from '@/apis/upload.js'
	import { listAllCategory } from '@/apis/category.js'
	import { addPosting } from '@/apis/posting.js'
	
	export default {
		components: {
			checkBox,
			wButton
		},
		data() {
			return {
				isRotate: false, //是否加载旋转
				posting: {
					detail: '',
					contactType: 1,
					contact: '',
					fileList: [],
					categoryId: '',
					anonymous: false
				},
				checkOptions: [{
					id: 1,
					name: '扣扣',
					selected: true
				},{
					id: 2,
					name: '微信'
				},{
					id: 3,
					name: '手机'
				}],
				category: [],
				categoryIndex: 0,
			}
		},
		methods: {
			bindPickerChange(e) {
				this.categoryIndex = e.detail.value;
				this.posting.categoryId = this.category[this.categoryIndex].id;
			},
			checkChange(data) {
				this.posting.contactType = data[0].id;
			},
			// 删除图片
			deletePic(event) {
				this.posting.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.posting.fileList.length
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFilePromise(lists[i].url)
					let item = this.posting.fileList[fileListLen]
					this.posting.fileList.splice(fileListLen, 1, result.data)
					fileListLen++
				}
			},
			changeAnonymous(e) {
				this.posting.anonymous = !this.posting.anonymous;
			},
			submit() {
				let _this = this;
				//登录
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.posting.detail.length  === 0) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '内容不能为空'
				    });
				    return;
				}
				if (this.posting.categoryId.length === 0) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '分类不能为空'
				    });
				    return;
				}
				_this.isRotate=true
				let flist = [];
				this.posting.fileList.forEach(f => flist.push(f.path));
				this.posting.imgList = flist;
				console.log(this.posting);
				addPosting(this.posting).then( res => {
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '发布成功'
					});
					setTimeout(() => {
						_this.$refs.child.$emit("clean");
						let categoryId = _this.category[0].id;
						_this.posting = {
							detail: '',
							contactType: 1,
							contact: '',
							fileList: [],
							categoryId: categoryId,
							anonymous: false
						};
						_this.categoryIndex = 0;
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 2000);
				}).finally(r => {
					_this.isRotate=false
				})
			},
		},
		onLoad() {
			let _this = this;
			listAllCategory().then( res => {
				console.log(res)
				_this.category = res.data.categoryList;
				_this.posting.categoryId = _this.category[0].id;
			})
		},
	}
</script>

<style>
	body {
		/* background: rgba(231, 231, 231, 0.4); */
	}
	
	textarea {
		min-height: 8rem !important;
	}
	
	.u-cell__title-text {
		font-size: 0.9rem !important;
		font-weight: 400;
		color: #989898 !important;
	}
	
	.u-form-item__body__left__content text {
		color: #737373 !important;
		font-size: 0.9rem !important;
	}
	

</style>
